<template>
  <div class="app-container">
    <!-- 后台管理-用户 -->
    <div class="top"> 
      <el-form :inline="true" :model="form" class="userForm">
        <el-form-item>
          <el-input v-model="form.username" placeholder="根据用户名搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="empty">清空</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="success" class="el-icon-edit" @click="add">新增用户</el-button>
    </div>
    <el-alert :title="`共${total}条记录`" type="info" show-icon :closable="false"></el-alert>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" ></el-table-column>
      <el-table-column prop="email" label="邮箱" ></el-table-column>
      <el-table-column prop="phone" label="联系电话" ></el-table-column>
      <el-table-column prop="username" label="用户名" ></el-table-column>
      <el-table-column prop="permission_group_title" label="权限组名称" width="180"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column  label="操作">
        <template #default="{row}">
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="del(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <add-user ref="addUser" :dialog-visible="visible" @close-dialog="closeDalog" @get_list="getList"></add-user>
    <!-- 分页器 -->
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="form.page"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="form.pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {userList,delUser} from '@/api/user'
import AddUser from '@/views/base/user/components/addUser.vue'
export default {
  name: 'Users',
  components: {
    AddUser
  },
  data() {
    return {
      form: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      tableData: [],
      total: 0,
      // 控制弹窗
      visible: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      // 你这里调接口
      const res = await userList(this.form)
      // console.log('后台-用户列表',res.list);
      this.tableData =res.list 
      this.total = res.counts
    },
    // 搜索
    search () {
      this.form.page = 1
      this.getList()
    },
    // 清空
    empty() {
      this.form = {
        page: 1,
        pagesize: 10,
        username: ''
      }
      this.getList()
    },
    // 新增用户
    add() {
      this.visible = true
    },
    closeDalog( ) {
      this.visible = false
    },
    // 分页器
    // 每页条数改变
    sizeChange(size) {
      this.form.pagesize = size
      this.getList()
    },
    // 当前页改变
    currentChange(page) {
      this.form.page = page
      this.getList()
    },
    // 点击编辑 编辑弹框
    async edit(id) {
      // console.log(id);
      // 打开弹窗
      this.visible = true
      // 数据回填（在子组件）
      // 调子组件的getDetail 并传递参数id
      this.$refs.addUser.getDetail(id)
    },
    // 删除
    async del(id) {
      // 询问用户
        this.$confirm('此操作将永久删除该用户件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {//确认删除
          // 调接口
          await delUser(id)
          // 提示用户
          this.$message.success('删除成功')
          // 更新列表
          this.getList()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  margin: 10px;
  background-color: #fff;
  .top {
    display: flex;
    justify-content: space-between;
  }
}
</style>